<!--
 * @Descripttion: 平台公告
 * @version: v1.0.0
 * @Author: 穆宏宇
 * @Date: 2021-01-26 13:09
 * @LastEditors: Administrator
 * @LastEditTime: 2021-01-26 13:09
-->
<template>
	<div class="row">
		<!-- <p class="title">优选品类<span>更多 ></span></p> -->
		<p class="title">优选品类</p>
		<div class="cateView"> 
			<div class="item" v-for="items in tableData">
				<div class="left">
				<!-- <div class="left" :style="{background:'linear-gradient(to right,'+items.backgrund.from+', '+items.backgrund.to+')'}"> -->
					<img :src="items.imgUrl"  />
					<p @click="goNav(items,1)">{{items.name}}&nbsp;&nbsp;&nbsp;<span>☞</span></p>
					<span v-for="item in items.cate" @click="goNav(item,2)"><a>{{item.name}}</a><br></span>
				</div>
				<div class="right">
					<div class="top" v-if="items.child.length>0">
						<img :src="items.child[0].imgUrl"  />
						<p @click="goNav(items.child[0],2)">{{items.child[0].name}}&nbsp;&nbsp;&nbsp;<span>☞</span></p>
						<span v-for="item in items.child[0].cate" @click="goNav(item,3)"><a>{{item.name}}</a><br></span>
					</div>
					<div class="bottom">
						<div class="bleft" v-if="items.child.length>1">
							<img :src="items.child[1].imgUrl"  />
							<p @click="goNav(items.child[1],2)">{{items.child[1].name}}&nbsp;&nbsp;&nbsp;<span>☞</span></p>
							<span v-for="item in items.child[1].cate" @click="goNav(item,3)"><a>{{item.name}}</a><br></span>
						</div>
						<div class="bright" v-if="items.child.length>2">
								<img :src="items.child[2].imgUrl"  />
								<p @click="goNav(items.child[2],2)">{{items.child[2].name}}&nbsp;&nbsp;&nbsp;<span>☞</span></p>
							<span v-for="item in items.child[2].cate" @click="goNav(item,3)"><a>{{item.name}}</a><br></span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		selectList
	} from "@/api/mall.api";
	export default {
		name: "cateView",
		components: {},
		props: {},
		data() {
			return {
				tableData: [],
				env: process.env.NODE_ENV === 'development' ? 'dev' : 'pro',
			}
		},
		computed: {},
		watch: {},
		filters: {},
		created() {
		
		},
		mounted() {
			this.selectList();
		},
		methods: {
			selectList(){
				var that = this;
				selectList().then((res) => {
					that.tableData = res;
				})
			},
			goNav(item,level){
				var that = this;
				this.$router.push({
					path:"/newSearch?primaryCategory="+item.id + '&level='+level + '&show=0&hasCate=1&categoryName='+item.name
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.floor {
		width: 100%;
		overflow: hidden;

		.row {
			width: 100%;
			overflow: hidden;

			.title {
				background-image: url(../../../assets/mall-images/dot.png);
				background-repeat: no-repeat;
				background-size: 30px 30px;
				text-indent: 40px;
				background-position: 0 5px;
				height: 40px;
				line-height: 40px;
				font-weight: bolder;
				font-size: 22px;
				margin: 20px 0px;
				margin-bottom: 0px;

				span {
					float: right;
					margin-right: 10px;
					font-weight: normal;
					font-size: 14px;
					cursor: pointer;
				}
			}
		}

		.cateView {
			width: 100%;
			overflow: hidden;
			
			.item:nth-child(2n+1) {
				margin-right: 20px;
			}
			.item {
				width: 590px;
				height: 330px;
				float: left;
				overflow: hidden;
				margin-top: 20px;
				span{
					font-size: 20px;
				}
				.left {
					width: 200px;
					height: 330px;
					float: left;
					position: relative;


					img {
						position: absolute;
						// left: 20px;
						// bottom: 20px;
						// width: 120px;
						// height: 120px;
						left: 0px;
						bottom: 0px;
						width: 100%;
						height: 100%;
					}

					p {
						margin-left: 20px;
						margin-top: 30px;
						font-size: 18px;
						font-weight: bold;
						color: #fff;
						position: relative;
						cursor: pointer;
					}

					a {
						color: #fff;
						display: inline-block;
						margin-left: 30px;
						margin-top: 15px;
						position: relative;
						cursor: pointer;
						font-size: 12px;
					}
					a:hover{
						color: #FF4D4F;
					}
				}

				.right {
					float: right;
					width: 380px;
					height: 330px;

					p {
						margin-left: 20px;
						margin-top: 20px;
						font-size: 18px;
						font-weight: bold;
						cursor: pointer;
					}

					a {
						display: inline-block;
						margin-left: 20px;
						margin-top: 15px;
						cursor: pointer;
						font-size: 12px;
						width: 90px;
						overflow: hidden;
						height: 16px;
					}

					a:hover{
						color: #FF4D4F;
					}
					.top {
						width: 380px;
						height: 160px;
						overflow: hidden;
						position: relative;
						background: #fff;

						img {
							position: absolute;
							right: 20px;
							bottom: 20px;
							width: 120px;
							height: 120px;
						}
					}

					.bottom {
						width: 380px;
						height: 160px;
						margin-top: 10px;
						overflow: hidden;

						.bleft {
							width: 185px;
							float: left;
							height: 160px;
							position: relative;
							background: #fff;

							img {
								position: absolute;
								right: 20px;
								bottom: 20px;
								width: 50px;
								height: 50px;
							}
						}

						.bright {
							width: 185px;
							float: right;
							height: 160px;
							position: relative;
							background: #fff;

							img {
								position: absolute;
								right: 20px;
								bottom: 20px;
								width: 50px;
								height: 50px;
							}
						}
					}
				}
			}
		}

	}
</style>
